<template>
  <div>
    <div class="add">
      <el-card>
        <div>
          <el-icon><Tickets /></el-icon>数据列表
        </div>

        <el-button
          type="primary"
          @click="router.push('/pms/addProductAttr?cid=${id}')"
          >添加</el-button
        >
      </el-card>
    </div>
    <el-table
      :data="userList"
      border
      table-layout="auto"
      cell-class-name="align-c"
      header-row-class-name="align-c"
    >
    <el-table-column label="编号" prop="id" />
      <el-table-column label="属性名称" prop="name" />
      <el-table-column label="商品类型" prop="productAttributeCategoryId" />
      <el-table-column label="属性是否可选" prop="relatedStatus" />
      <el-table-column label="属性值的录入方式" prop="handAddStatus" />
      <el-table-column label="可选值列表" prop="inputList" />
      <el-table-column label="排序" prop="sort" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button text type="primary" v-permission="'allocRole'"
            >属性列表</el-button
          >
          <el-button text type="primary" v-permission="'allocRole'"
            >参数列表</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import useTable from "@/hooks/useTable";
import { productAttributeListApi } from "./api/api";
const route = useRoute();
// const formli = reactive<AttriButeModel>({
//   name: "",
//   productAttributeCategoryId: 0, //产品属性类别ID
//   selectType: 0, //选择类型
//   inputList: "", //输入列表
//   inputType: 0, //输入类型
//   sort: 0, //分类
//   filterType: 0, //过滤器类型
//   searchType: 0, //搜索类型
//   relatedStatus: 0, //相关状态
//   handAddStatus: 0, //手动添加状太
//   type: 0,
// });
// const form = reactive({
//   type:0
// })
const userList = ref<AttriButeList[]>([]);


const queryParams = reactive<IUserListParams>({
  pageNum: 1,
  pageSize: 5,
  type:0
})
// watch(() => route.query.id,(form) => {
//   form.id = route.query.id
//   form.type = route.query.type
// })
const router = useRouter();
// const { list } = useTable(productAttributeListApi(parseInt(id as string),form))
const id = route.query.cid;
console.log(route.query);
const productAttributeCategoryId = route.query.name
console.log(productAttributeCategoryId);

const queryUserList = () => {
  productAttributeListApi(parseInt(id as string), queryParams).then((res) => {
    userList.value = res.data.list
    // productAttributeCategoryId = userList.value.
});
}
queryUserList();

</script>
<style lang="less" scoped>
.add {
  margin: 20px 0;
  :deep(.el-card__body) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
</style>
